<template>
	<view class="indexPage">
		<view class="school" @click="popupOpen">
			<text class="iconfont icon-jiantou" style="color: #0d51b2;font-size: 26rpx;"></text>
			<text class="text">{{schoolPopup}}</text>
		</view>

		<view class="swiper-box">
			<swiper class="swiper" :current="swiperCurrent" :autoplay="true" :interval="3000" :circular="true" @change="swiperChange">
				<swiper-item v-for="(item ,index) in swiperList" :key="index">
					<view class="swiper-item">
						<image class="image" :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="indicator-num">
				<view class="left">
					<text>{{ swiperCurrent + 1 }}</text>
				</view>
				<view class="right">
					<text>{{ swiperList.length }}</text>
				</view>
			</view>
		</view>
		
		<view class="funBox mTop3">
			<view class="item flex_conter" @click="goCard(1)">
				<view class="icon">
					<text class="iconfont icon-jingcha"></text>
				</view>
				<view class="content">
					<view class="title">新生校园卡</view>
					<view class="introduce">校园卡在线办理</view>
				</view>
			</view>
			<view class="item flex_conter" @click="goCard(2)">
				<view class="icon">
					<text class="iconfont icon-shoujika"></text>
				</view>
				<view class="content">
					<view class="title">老生校园卡</view>
					<view class="introduce">校园卡在线办理</view>
				</view>
			</view>
			<!-- <view class="item flex_conter" @click="goCard(3)">
				<view class="icon">
					<text class="iconfont icon-chongzhi"></text>
				</view>
				<view class="content">
					<view class="title">充100送100</view>
					<view class="introduce">话费充值100送100</view>
				</view>
			</view> -->
			<view class="item flex_conter" @click="kuandai()">
				<view class="icon">
					<text class="iconfont icon-kuandai"></text>
				</view>
				<view class="content">
					<view class="title">宽带缴费</view>
					<view class="introduce">宽带在线预约</view>
				</view>
			</view>
			<view class="item flex_conter" @click="goCard(5)">
				<view class="icon">
					<text class="iconfont icon-kuandai"></text>
				</view>
				<view class="content">
					<view class="title">面对面开户</view>
					<view class="introduce">入网登记</view>
				</view>
			</view>
			
			<!-- <view class="item flex_conter" @click="navigatorEvent">
				<view class="icon">
					<text class="iconfont icon-yiqingfangkong"></text>
				</view>
				<view class="content">
					<view class="title">疫情防控</view>
					<view class="introduce">疫情期间行程查询</view>
				</view>
			</view> -->
			
			<view class="item flex_conter" @click="$refs.shouhouPopup.open()">
				<view class="icon">
					<text class="iconfont icon-shouhou"></text>
				</view>
				<view class="content">
					<view class="title">售后服务</view>
					<view class="introduce">校园卡线上售后服务</view>
				</view>
			</view>
		</view>
		
		<view class="serviceBox flex_space_b">
			<view class="item" @click="$refs.dialogPopup.open()">
				<uni-icons type="location-filled"></uni-icons>
				<text class="text">办理点地址</text>
			</view>
			<view class="item" @click="$refs.phonePopup.open()">
				<uni-icons type="phone-filled"></uni-icons>
				<text class="text">客服电话</text>
			</view>
		</view>
		
		<view class="tengfan">
			<view class="logo-box">
				<view class="right-text">
					<view class="text">豫ICP备17016251号-5</view>
					<view class="logo-show text"><image class="logo" src="../../static/tengfan-logo.png" mode="aspectFill"></image><text class="logo-right">腾帆科技提供技术支持</text></view>
				</view>
			</view>
			<!-- <image class="arrow" src="../../static/arrow.png" mode="widthFix"></image>
			<view class="bottom-text">做小程序点击这里</view> -->
		</view>
		
		<view class="tabbar">
			<view class="content">
				<view class="item active">
					<text class="iconfont icon-home"></text>
					<view class="text">首页</view>
				</view>
				<view class="item" @click="goUrl('/pages/my/my?parent_user='+ schoolId)">
					<text class="iconfont icon-my"></text>
					<view class="text">我的</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="popupBox">
				<view class="titleBox">
					<view class="title">请选择学校</view>
					<view class="introduce">选择您需要办理业务的校园</view>
					<view class="close" v-if="schoolPopup && schoolPopup != ''" @click="popupClose">
						<uni-icons type="closeempty"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y class="content" >
					<view class="list">
						<view
						 class="item"
						 :class="{'active': selectAction == item.nickname}"
						 v-for="(item, index) in schoolList"
						 :key="index"
						 @click="schoolChenge(item.nickname,item.id)">{{item.nickname}}</view>
					</view>
				</scroll-view>
				<view class="btnBox">
					<button class="btn" type="default" :disabled="!selectAction" @click="popupConfirm">确认</button>
				</view>
			</view>
		</uni-popup>
		
		
		<uni-popup ref="dialogPopup" type="dialog" :isMaskClick="false">
	        <uni-popup-dialog type="info" mode="base" title="提示" :content="address"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="waitPopup" type="dialog">
			<uni-popup-dialog type="info" mode="base" title="提示" content="该学校该功能暂未开放"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="inputPopup" type="dialog">
			<uni-popup-dialog type="info" mode="input" title="输入校验码" @confirm="inputPopupConfirm"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="phonePopup" type="center" :isMaskClick="false">
			<view class="phonePopupBox">
				<view class="close" @click="$refs.phonePopup.close()">
					<uni-icons type="closeempty"></uni-icons>
				</view>
				<view class="titleBox">
					<view class="title">客服电话</view>
				</view>
				<view class="phoneBox flex_space_b">
					<view v-if="phone.length == 0">暂无联系方式</view>
					<view class="item" v-else  v-for="(item, index) in phone"  :key="index"  @click="makePhoneCall(item)">{{item}}</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="shouhouPopup" type="center" :isMaskClick="false">
			<view class="shouhou-popup">
				<view class="close" @click="$refs.shouhouPopup.close()">
					<uni-icons type="closeempty"></uni-icons>
				</view>
				<view class="titleBox">
					<view class="title">售后二维码</view>
				</view>
				<view class="content">
					<image class="image" src="/static/shouhou.jpg" mode="widthFix" show-menu-by-longpress></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				schoolPopup: '',
				selectAction:'',
				selectId:0,
				schoolId:'',
				schoolList: [],
				swiperCurrent: 0,
				swiperList: [],
				utoken:'',
				type:'',
				address:'',
				phone:[],
			}
		},
		onShow() {
			this.schoolPopup = uni.getStorageSync('schoolPopup') || '请选择学校';
			this.schoolId = uni.getStorageSync('schoolId');		
			this.getIndex();
		},
		methods: {
			goCard(type){
				this.type = type;
				this.$refs.inputPopup.open();
			},
			getIndex(){
				util.requestPost('index/index', { parent_user: this.schoolId }, (res) => {
					if (res.code == 1) {
						this.schoolList = res.data.list;
						this.swiperList = res.data.swiperList;
						this.address = res.data.address;
						this.phone =res.data.phone;
						if(!this.schoolId){
							this.popupOpen();
						}
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			checkCode(code){
				util.requestPost('index/checkCode', {code:code,schoolId:this.schoolId,schoolPopup:this.schoolPopup}, (res) => {
					if (res.code == 1) {
						 this.$toast(res.msg)
						 if(this.type == 1 || this.type == 2){
							 uni.navigateTo({
							 	url: '/pages/index/choose?schoolId='+this.schoolId+'&code=' + code + '&type=' + this.type
							 })
						 }else if(this.type == 3){
							 uni.navigateTo({
							 	url:'/pages/index/topupList?setting_parent_user=' + this.schoolId
							 })
						 }else if(this.type == 5){
							 uni.navigateTo({
							 	url:'/pages/index/loginin?setting_parent_user=' + this.schoolId
							 })
						 }else{
							 uni.navigateTo({
							 	url:'/pages/index/broadband?setting_parent_user=' + this.schoolId
							 })
						 }
					} else {
						 this.$toast(res.msg)
					}
				}, (err) => {
					console.log(err);
				}, {isShowLoading: false});
			},
			popupOpen () {
				this.$refs.popup.open();
			},
			popupClose () {
				this.$refs.popup.close();
			},
			popupConfirm () {
				uni.setStorageSync('schoolPopup',this.selectAction);
				uni.setStorageSync('schoolId',String(this.selectId));
				this.schoolPopup = this.selectAction;
				this.schoolId =String(this.selectId);
				this.getIndex();
				this.$refs.popup.close();
			},
			schoolChenge (name,id) {
				this.selectAction = name;
				this.selectId = id;
			},
			swiperChange (e) {
				this.swiperCurrent = e.detail.current;
			},
			makePhoneCall (phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			navigatorEvent () {
				// #ifdef H5
				location.href = 'https://xc.caict.ac.cn/?code=146'
				// #endif
			},
			goUrl (url) {
				uni.navigateTo({
					url
				})
			},
			kuandai(){
				 this.$toast('敬请期待');return;
			},
			inputPopupConfirm (e) {
				if(!e){
					  this.$toast('请输入校验码');return;
				}
				console.log(e);
				this.checkCode(e)
			}
		}
	}
</script>

<style scoped lang="scss">
.indexPage {
	padding: 0 24rpx 120rpx;
	.school {
		padding: 20rpx 0;
		color:#0d51b2 !important;
		font-size: 28rpx;
		font-weight: bold;
		.text {
			margin-left: 8rpx;
		}
	}
	.swiper-box {
		width: 100%;
		height: 320rpx;
		position: relative;
		.swiper {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
			overflow: hidden;
			.swiper-item {
				width: 100%;
				height: 100%;
				.image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.indicator-num {
			position: absolute;
			right: 40rpx;
			bottom: 20rpx;
			z-index: 10;
		}
	}
	.funBox {
		display: flex;
		flex-wrap: wrap;
		gap: 30rpx;
		.item {
			width: 336rpx;
			height: 160rpx;
			box-sizing: border-box;
			padding: 10rpx 28rpx;
			border-radius: 8rpx;
			box-shadow: 0 0 8rpx rgba($color: #000000, $alpha: 0.2);
			.icon {
				.iconfont {
					color: $assist-color;
					font-size: 50rpx;
				}
			}
			.content {
				margin-left: 20rpx;
				.title {
					color: #333333;
					font-size: 28rpx;
				}
				.introduce {
					margin-top: 8rpx;
					color: #888;
					font-size: 24rpx;
				}
			}
		}
	}
	.serviceBox {
		margin-top:60rpx;
		.item {
			box-sizing: border-box;
			width: 336rpx;
			padding: 20rpx 0;
			font-size: 28rpx;
			text-align: center;
			border: $border-base;
			border-radius: 8rpx;
			.text {
				margin-left: 20rpx;
			}
			margin-bottom: 20rpx;
		}
	}
	.tengfan {
		margin-top: 80rpx;
		margin-bottom: 0rpx;
		text-align: center;
		.logo-box {
			display: flex;
			align-items: center;
			justify-content: center;
			.logo {
				width:30rpx;
				height: 30rpx;
				
			}
			.logo-show{
				margin-right: 40rpx;
				margin-top: 10rpx;
				.logo-right{
					margin-left: 10rpx;
				}
			}
			
			.right-text {
				color: #666;
				font-size: 26rpx;
				text-align: center;
				padding-left: 12rpx;
			}
		}
		.arrow {
			width: 32rpx;
		}
		.bottom-text {
			color: #999;
			font-size: 26rpx;
		}
	}
}

.popupBox {
	width: 600rpx;
	text-align: center;
	border-radius: 20rpx;
	background-color: #FFFFFF;
	.titleBox {
		position: relative;
		padding: 32rpx 0;
		border-bottom: $border-base;
		.title {
			// font-weight: bold;
		}
		.introduce {
			color: #888;
			font-size: 24rpx;
			margin-top: 6rpx;
		}
		.close {
			position: absolute;
			top: 50rpx;
			right: 40rpx;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			border: 1rpx solid #666;
			border-radius: 50%;
		}
	}
	.content {
		max-height: 600rpx;
		.list {
			padding: 20rpx 32rpx;
			.item {
				font-size: 28rpx;
				font-weight: bold;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				border: 1rpx solid #f7f7f9;
				background-color: #f7f7f9;
				&:not(:last-of-type) {
					margin-bottom: 16rpx;
				}
				&.active {
					color: $primary-color;
					border: 1px solid $primary-color;
				}
			}
		}
	}
	.btnBox {
		padding: 20rpx;
		border-top: $border-base;
		.btn {
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			background-color: $primary-color;
			border-radius: 40rpx;
			&::after {
				border: none;
			}
			&[disabled][type=default] {
				background-color: #999;
			}
		}
	}
}

.phonePopupBox {
	width: 600rpx;
	text-align: center;
	border-radius: 20rpx;
	background-color: #FFFFFF;
	position: relative;
	.close {
		position: absolute;
		right: 50%;
		bottom: -80rpx;
		transform: translateX(50%);
		width: 52rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
	}
	.titleBox {
		position: relative;
		padding: 20rpx 0;
		border-bottom: $border-base;
		.title {
			font-weight: bold;
		}
	}
	.phoneBox {
		padding: 32rpx;
		.item {
			width: 260rpx;
			padding: 20rpx 0;
			color: $primary-color;
			text-align: center;
			border-radius: 8rpx;
			background-color: #f7f7f9;
		}
	}
}

.shouhou-popup {
	width: 600rpx;
	text-align: center;
	border-radius: 20rpx;
	background-color: #FFFFFF;
	position: relative;
	.close {
		position: absolute;
		right: 50%;
		bottom: -80rpx;
		transform: translateX(50%);
		width: 52rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
	}
	.titleBox {
		position: relative;
		padding: 20rpx 0;
		border-bottom: $border-base;
		.title {
			font-weight: bold;
		}
	}
	.content {
		padding: 40rpx 0;
		text-align: center;
		.image {
			width: 400rpx;
		}
	}
}
</style>
